<template>
  <div class="page-container">
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <!-- 查询 重置 新增 刷新 列显示 导出-->
        <el-row class="search-button mt20">
          <!-- <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
          </el-form-item>-->
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <!-- <el-form-item style="float:right">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
          </el-form-item>-->
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="padding-top:20px;padding-right:15px;">
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      ref="CyTable"
      :data="pageResult"
      :columns="detailColumns"
      @findPage="findPageMock"
      :showEditOperation="false"
      :showCustomOperation="true"
      :showDetailOperation="false"
      :showBatchDelete="false"
      :showPagenation="false"
      :showSelection="false"
      :showDeleteOperation="false"
      :customLabel="'查看报表分析'"
      @handleCustom="checkReport"
      selectionChange="selectionChange"
      @handleDetail="handleDetail"
    ></cy-table>
    <!--新增添加页面界面-->
    <el-dialog
      title="添加活动"
      width="70%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :inline="true"
        :model="dataForm"
        label-width="125px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-row class="searchDialog-input">
           <el-form-item label="关联年度：">
          <el-select v-model="addForm.year" placeholder="关联年度" style="width:200px">
            <el-option label="2020年" value="1"></el-option>
            <el-option label="2019年" value="2"></el-option>
            <el-option label="2018年" value="3"></el-option>
            <el-option label="2017年" value="4"></el-option>
            <el-option label="2016年" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select v-model="addForm.month" placeholder="月份" style="width:200px">
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称：">
          <el-select v-model="addForm.name" placeholder="活动名称" style="width:200px">
            <el-option label="限时秒杀" value="1"></el-option>
            <el-option label="万人团购" value="2"></el-option>
            <el-option label="周末不打烊" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动类型：">
          <el-select v-model="addForm.type" placeholder="活动类型" style="width:200px">
            <el-option label="拉新" value="1"></el-option>
            <el-option label="促活" value="2"></el-option>
            <el-option label="留存" value="3"></el-option>
            <el-option label="裂变" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计参与人数：">
          <el-input v-model="addForm.predictPerson" placeholder="预计参与人数"></el-input>
        </el-form-item>
        <el-form-item label="实际参与人数：" label-width="132px">
          <el-input v-model="addForm.practicalPerson" placeholder="实际参与人数"></el-input>
        </el-form-item>
        <el-form-item label="预计投入成本：" label-width="130px">
          <el-input v-model="addForm.predictCost" placeholder="预计投入成本"></el-input>
        </el-form-item>
        <el-form-item label="实际投入成本：" label-width="130px">
          <el-input v-model="addForm.practicaltCost" placeholder="实际投入成本"></el-input>
        </el-form-item>
        <el-form-item label="预计投入额：">
          <el-input v-model="addForm.predictCostMonet" placeholder="预计投入额"></el-input>
        </el-form-item>
        <el-form-item label="实际投入额：" label-width="132px">
          <el-input v-model="addForm.practicalCostMonet" placeholder="实际投入额"></el-input>
        </el-form-item>
        <el-form-item label="实际投入人数：" label-width="132px">
          <el-input v-model="addForm.predictCostPerson" placeholder="实际投入人数"></el-input>
        </el-form-item>
        <el-form-item label="复购数：" label-width="128px">
          <el-input v-model="addForm.reBuyNumber" placeholder="复购数"></el-input>
        </el-form-item>
        <el-form-item label="预计营销额：">
          <el-input v-model="addForm.predictTurnover" placeholder="预计营销额"></el-input>
        </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import CyTable1 from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";

export default {
  components: {
    PopupTreeInput,
    CyTable,
    CyTable1,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      editDialogVisible: false, // 是否显示新增编辑页面
      // 添加活动数据
      addForm: {
        year: "", // 关联年度
        month: "", // 关联月度
        name: "", // 活动名称
        type: "", // 活动类型
        predictPerson: "", // 预计参与人数
        practicalPerson: "", // 实际参与人数
        predictCost: "", // 预计投入成本
        practicaltCost: "", // 实际投入成本
        predictCostMonet: "", // 预计投入额
        practicalCostMonet: "", // 实际投入额
        predictCostPerson: "", // 实际投入人数
        reBuyNumber: "", // 复购数
        predictTurnover: "" // 预计营业额
      },

      imgUpload: this.utils.getUpLoadHost(),
      size: "small",
      document_license: "",
      filters: {
        name: "",
        preparedStartTime: "",
        preparedEndTime: ""
      },
      filtersCyTable1: {},

      imgs: "",
      fileList: {},
      columns: [],
      warehouselist: [],
      filterColumns: [],
      detailColumns: [
        { prop: "date", label: "年度/月份", minWidth: 120 },
        { prop: "name", label: "活动名称", minWidth: 120 },
        { prop: "type", label: "活动类型", minWidth: 120 },
        { prop: "targetNumber", label: "完成目标总额", minWidth: 120 },
        { prop: "practicalNumber", label: "实际总额", minWidth: 120 },
        { prop: "planCost", label: "计划总成本", minWidth: 120 },
        { prop: "practicalCost", label: "实际总成本", minWidth: 130 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      pageResultDetail: {
        rows: [
          {
            date: "2019年1月",
            name: "万人拼团",
            type: "拼团活动",
            targetNumber: "110万",
            practicalNumber: "90万",
            planCost: "200万",
            practicalCost: "140万"
          },
          {
            date: "2019年2月",
            name: "限时秒杀",
            type: "秒杀活动",
            targetNumber: "120万",
            practicalNumber: "94万",
            planCost: "220万",
            practicalCost: "140万"
          },
          {
            date: "2019年3月",
            name: "满额满减",
            type: "满减活动",
            targetNumber: "140万",
            practicalNumber: "100万",
            planCost: "260万",
            practicalCost: "180万"
          },
          {
            date: "2019年4月",
            name: "限时秒杀",
            type: "秒杀活动",
            targetNumber: "200万",
            practicalNumber: "170万",
            planCost: "280万",
            practicalCost: "240万"
          },
          {
            date: "2019年5月",
            name: "万人拼团",
            type: "拼团活动",
            targetNumber: "300万",
            practicalNumber: "290万",
            planCost: "350万",
            practicalCost: "324万"
          },
          {
            date: "2019年6月",
            name: "满额满减",
            type: "满减活动",
            targetNumber: "300万",
            practicalNumber: "256万",
            planCost: "300万",
            practicalCost: "265万"
          },
          {
            date: "2019年7月",
            name: "满额满减",
            type: "满减活动",
            targetNumber: "400万",
            practicalNumber: "354万",
            planCost: "430万",
            practicalCost: "398万"
          },
          {
            date: "2019年8月",
            name: "万人拼团",
            type: "拼团活动",
            targetNumber: "350万",
            practicalNumber: "324万",
            planCost: "380万",
            practicalCost: "340万"
          },
          {
            date: "2019年9月",
            name: "限时秒杀",
            type: "秒杀活动",
            targetNumber: "400万",
            practicalNumber: "369万",
            planCost: "350万",
            practicalCost: "324万"
          },
          {
            date: "2019年10月",
            name: "限时秒杀",
            type: "秒杀活动",
            targetNumber: "450万",
            practicalNumber: "436万",
            planCost: "440万",
            practicalCost: "399万"
          },
          {
            date: "2019年11月",
            name: "万人拼团",
            type: "拼团活动",
            targetNumber: "440万",
            practicalNumber: "423万",
            planCost: "500万",
            practicalCost: "447万"
          },
          {
            date: "2019年12月",
            name: "万人拼团",
            type: "拼团活动",
            targetNumber: "500万",
            practicalNumber: "469万",
            planCost: "500万",
            practicalCost: "488万"
          }
        ],
        total: 1,
        mock_title: "",
        code: "0000"
      },
      dialogImageUrl: "",

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      printPage: false,
      dialogVisibleImage: false,
      merchantVisible: false, //商户页面是否显示
      deptData: [],
      dataFormRules: {
        replyContent: [{ required: true, message: "回复内容", trigger: "blur" }]
      },
      // 新增编辑界面数据
      dataForm: {
        serveno: "",
        status: ""
      },
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.filters.t = "salesOrderReport";
      this.$refs.CyTable.findPage(this.filters);
    },
    //mock数据
    findPageMock: function() {
      this.$refs.CyTable.findPageMock(this.pageResultDetail);
    },
    clinkMock: function() {
      this.$refs.CyTable1.findPageMock(this.clickDetail);
    },
    // 跳转到分析报表页面
    checkReport(value) {
      this.$router.push({
        path: "/pages/promotionManagement/monthAnalysis",
        query: {}
      });
    },
    // 根据日期查询数据
    findPageByDate: function(data) {
      this.filters.t = "salesOrderReport";
      this.$refs.CyTable.findPageByDate(this.filters);
    },
    //弹窗关闭方法
    handleClose() {
      this.$refs.dataForm.resetFields();
    },
    // 批量删除
    handleDelete: function(data) {
      var ids = "";
      for (var i = 0; i < data.params.length; i++) {
        ids = ids + data.params[i].id + ",";
      }
      data.t = "salesOrderReport";
      data.ids = ids;
      this.utils.request.deleteUserInfo(data, this.deleteInfoBack);
    },
    //删除callback
    deleteInfoBack(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, ", type: "error" });
      }
      this.findPage();
    },

    //导入方法
    importexe() {
      this.printPage = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "销售订单报表";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    },
    // 显示新增界面
    handleAdd: function() {
      this.editDialogVisible = true;
      this.operation = true;
      this.resetForm("dataForm");
    },
    // 打印
    print: function() {
      this.printPage = true;
      this.operation = true;
    },
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters = {};
        this.findPage(null);
      }
    },
    reset: function() {
      this.filters = {};
      this.findPageMock();
    },

    resetCyTable1: function() {
      this.filtersCyTable1 = {};
      this.clinkMock();
    },

    operationClick: function() {
      var this_ = this;
      this_.merchantVisible = false;
    },

    // 显示编辑界面
    handleDetail: function(params) {
      console.log(params);
      this.dialogVisible = true;
      this.operation = false;
      var this_ = this;
      this.$nextTick(function() {
        this_.dataForm = Object.assign({}, params.row);
      });
    },
    // 提交编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            var this_ = this;
            this_.$message({ message: "操作成功", type: "success" });
            this_.editDialogVisible = false;
          });
        }
      });
    },
    // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败", type: "error" });
      }
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    yesOrNo: function(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "是";
      } else if (cellValue == 1) {
        return "否";
      }
    }
  },
  mounted() {
    this.findPageMock();
    this.initColumns();
  }
};
</script>

<style scoped lang='scss'>
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
  font-size: 18px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
